<template>
  <div class="login">
<div class="account" v-if="isLogin">
    <top-header :isLeft="true" title="奶茶吧"></top-header>
    <div class="logo">
      <img  src="https://ss0.baidu.com/6ON1bjeh1BF3odCf/it/u=192899033,4191762749&fm=27&gp=0.jpg" alt="">
    </div>
    <div class="login-content">
    <login-input v-for="(item, index) in accountData" :key="index" :info="item"></login-input>
    </div>
    <div class="login-opreate">
   <a-button type="primary" block shape="round" @click="login"> 登录</a-button>
   <a-button type="link" @click="isLogin=!isLogin">没有账号去注册</a-button>
    </div>
</div>

<div class="phone" v-if="!isLogin">
 <top-header :isLeft="true" title="奶茶吧"></top-header>
  <div class="logo">
      <img  src="https://ss0.baidu.com/6ON1bjeh1BF3odCf/it/u=192899033,4191762749&fm=27&gp=0.jpg" alt="">
    </div>
    <div class="login-content">
    <login-input v-for="(item, index) in registerData" :key="index" :info="item"></login-input>
    </div>
    <div class="login-opreate">
   <a-button type="primary" block shape="round" @click="register"> 注册</a-button>
   <a-button type="link" @click="isLogin=!isLogin">已有账号去登录</a-button>
    </div>


</div>


  </div>
</template>

<script>
import LoginInput from '../components/LoginInput.vue'
import TopHeader from '../components/ToHeader'
import QS from "qs";

export default {
  components: { TopHeader, LoginInput },
 
 data() {
     return {
         VCode:'',
         isLogin:true,
         accountData:{
           username:{
             label:"用户名",
             val:'',
           },
           password:{
             label:"密码",
             val:"",
             type:"password"
           },
         },
         registerData:{
           name:{
             label:"用户名",
             val:'',
           },
            pwd:{
             label:"密码",
             val:'',
           },
            againpwd:{
             label:"确认密码",
             val:'',
           },
           
         }
     }
 },
  methods: {
  
    login(){
        
            let params=QS.stringify({
                username:this.accountData.username.val,
                password:this.accountData.password.val,
              
                })
            this.$axios.post("http://localhost/milktea/userlogin.php",params).then((result)=>{
                  
                  console.log(result.data);
                console.log(result.data.code);
                if (result.data.code==200) {
                    this.$message.success("登录成功");
                    this.$router.push('/home')
                }else if (result.data.code==-1) {
                    this.$message.error("没有这个人啊，哥哥！");
                }else{
                    this.$message.error("我知道密码，我就输错，哎，就是玩儿！");
                }
            }).catch((err)=>{
                console.log(err);
            });
         
           
        },
   register(){
           let par=QS.stringify({
                username:this.registerData.name.val,
                password:this.registerData.pwd.val,
                againpassword:this.registerData.againpwd.val
                })
            this.$axios.post("http://localhost/milktea/enroll.php",par).then((result)=>{
                  
                  console.log(result.data);
                console.log(result.data.code);
                if (result.data.code==200) {
                    this.$message.success("注册成功");
                    this.$router.push("/login");
                }else if (result.data.code==-1) {
                    this.$message.error("该用户名已注册可以，可以直接登录哦");
                }else{
                    this.$message.error("我知道密码，我就输错，哎，就是玩儿！");
                }
            }).catch((err)=>{
                console.log(err);
            });
         
   },

        
    
     },

    
}

</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: white;
  
  .account,
  .phone {
    height: 100%;
    .logo{
      height: 160px;
      width: 100%;
      text-align: center;
      padding-top: 20px;
     img{
      height: 140px;
      width: 140px;
      border-radius: 70px;
  
     }
    }
    .login-content {
      padding: $common-padding;
    }
    .login-opreate {
      height: 20%;
      padding: $common-padding;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
    }
  }
}
h2 {
  font-size: 2rem;
  font-weight: bolder;
}
.icon-guanbi {
  font-size: 20px;
  font-weight: bolder;
}
</style>
